<%@include file="includes/head.jsp" %>

<div>
	<span id="status">Hola mundo...</span>
</div>

<hr />

<a href="/">Home</a>
<div id="links"> 
	<a href="http://google.com">Google</a> 
	<a href="http://ubuntu.com">Ubuntu</a> 
	<a href="http://debian.org">Debian</a> 
</div>

<hr />

<div id="frases">
	<div>Hola mundo!</div>
	<div>Foo bar</div>
	<div>Lorem Ipsum</div>
</div>

<hr />

<form>
	<input type="text" id="nombre" value="Javier" onmouseover="this.focus()" />
 	<input type="text" id="apellidos" value="Perez" onmouseover="this.focus()" />
 	<a href="#" onclick="document.getElementById('nombre').focus()">Nombre</a>
	<a href="#" onclick="document.getElementById('apellidos').focus()">Apellidos</a> 
</form>

<hr />

<script>
function init(){
	//Escribimos en la página el texto
	document.write('<b>Hello World!</b>');
	document.write('<hr />');

	//Obtenemos el elemento "status"
	var el = document.getElementById("status");
	//Mostramos la traza por pantalla
	console.info('Hemos cargado la variable el:' + el.innerHTML)
	

	//Obtenemos el elemento "wtf" (inexistente)
	var el2 = document.getElementById("wtf");
	//Mostramos el error por pantalla
	if(el2==undefined){
		console.error('No se ha encontrado el elemento wtf')		
	}
	
	// Obtenemos el elemento con id "links" var
	links = document.getElementById("links");
	// Ahora obtenemos todos los elementos con tag A que hay
	// dentro del elemento 'el' var
	as = links.getElementsByTagName("a");
	// Y finalmente recorremos el array de elementos para
	// cambiarles el color a cada uno
	for (var i=0; i<as.length; i++) {
		as[i].style.color = 'pink'; // negro
	}
	
	// Creamos el array de nombres
	var nombres = ['Luis','Javier','Sancho','Roberto','Rafael','Manuel'];
	// Unimos todos los elementos separándolos por comas
	var juntos = nombres.join(", ");
	// Y lo mostramos
	document.write("<br />From Array to String: "+juntos);
	document.write("<br />From String to Array: ");
	var nombres = juntos.split(", ");
	for (var i=0; i<nombres.length; i++){
		document.write(nombres[i]);
		if (i<nombres.length-1){
			document.write(" - ");
		}
	}
	
	document.write('<hr />');
	
	function str_replace(cadena, cambia_esto, por_esto) {
		 return cadena.split(cambia_esto).join(por_esto);
		}
	document.write("<br />"+str_replace('Hola mundo!','mundo','world'));
	
	document.write('<hr />');
	
	// Creamos la funcion para añadir eventos
	function nuevo_evento(elemento, evento, funcion) {
		if (elemento.addEventListener) {
			elemento.addEventListener(evento, funcion, false);
		} else {
			elemento.attachEvent("on"+evento, funcion);
		}
	}

	// Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclick
	var divs = document.getElementById("frases").getElementsByTagName("DIV");
	
	// Recorremos todos los divs
	for (var i=0; i<divs.length; i++) {
		// Añadimos el evento onclick al div
		nuevo_evento(divs[i], "click", function(){
			// Hacemos que muestre el contenido del DIV
			alert(this.innerHTML);
		});
	 }

}
	
//Esperamos a cargar la página para llamar a la función init
window.onload = init();
	
</script>

<%@include file="includes/footer.jsp" %>